<!-- 违章账单详情 -->
<template>
  <div class="page-container">
    <card class="add-info-card" title="订单信息" toggle>
      <div class="section-item">
        <div class="section-item-content" v-if="violation">
          <a-descriptions :size="'medium'" :align="{ label: 'right' }">
            <a-descriptions-item label="车牌号">{{ violation.licenseNo || '-' }}</a-descriptions-item>
            <a-descriptions-item label="车型">{{ violation.carModelName || '-' }}</a-descriptions-item>
            <a-descriptions-item label="归属门店">{{ violation.siteName || '-' }}</a-descriptions-item>
            <a-descriptions-item label="违章单号">{{ violation.violantionCode || '-' }}</a-descriptions-item>
            <a-descriptions-item label="违章状态">{{ violation.eventStatusStr || '-' }}</a-descriptions-item>
            <a-descriptions-item label="违章时间">{{ violation.eventTime || '-' }}</a-descriptions-item>
            <a-descriptions-item label="违章城市">{{ violation.eventCityName || '-' }}</a-descriptions-item>
            <a-descriptions-item label="违章地点">{{ violation.eventAddress || '-' }}</a-descriptions-item>
            <a-descriptions-item label="违章行为">{{ violation.eventContent || '-' }}</a-descriptions-item>
            <a-descriptions-item label="罚分">{{ violation.eventScore || '-' }}</a-descriptions-item>
            <a-descriptions-item label="处理方">{{ violation.handleTypeName || '-' }}</a-descriptions-item>
            <a-descriptions-item label="是否支持违章押金自动抵扣">{{ violation.violationDepositTypeName || '-' }}</a-descriptions-item>
            <a-descriptions-item label="负责人">{{ violation.staffName || '-' }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </card>
    <card class="add-info-card" title="费用信息" :showDivider="false">
      <table-index class="insure-card-table" :table="tableCompulsory" @loadData="getOrderDetails">
        <template #table-summary>
          <div class="table-info">
            <span class="table-info-item">
              应收： <span class="a-link">{{ unitVal(orderDetails.totalAmount, '元') }} </span>
            </span>
            <span class="table-info-item table-info-item-right">
              实收： <span class="a-link">{{ unitVal(orderDetails.receivedAmount, '元') }} </span>
            </span>
          </div>
        </template>
        <template #billmsg="{ record }"> {{ record.confirmUserName }}{{ record.confirmTime }} </template>
        <template #okmsg="{ record }"> {{ record.recordConfirmUserName }}{{ record.recordConfirmTime }} </template>
        <template #expand-icon="{ expanded }">
          <icon-plus-circle style="font-size: 40px; color: #0256ff" v-if="!expanded" />
          <icon-minus-circle style="font-size: 40px; color: #0256ff" v-else />
        </template>
      </table-index>
    </card>
  </div>
</template>

<script setup name="Maintenancedetail" lang="ts">
  import { unitVal } from '@/utils'
  import { onMounted, ref } from 'vue'
  import { getViolationBillInfo } from '@/api/finance/costConfirm.js'
  import { useTable } from '@/hooks/table'
  import { useRoute } from 'vue-router'
  const route = useRoute()
  const routeQuery = route.query
  const businesId = ref()
  businesId.value = routeQuery.businesId
  const orderDetails = ref<any>({})
  const tableCompulsory = useTable({
    pagination: false,
    columns: [
      { title: '费用名称', dataIndex: 'feeName', fixed: 'left', width: 180 },
      { title: '费用类型', dataIndex: 'feeTypeName' },
      { title: '收支类型', dataIndex: 'costTypeName' },
      { title: '费用金额', dataIndex: 'totalAmount', unit: '元' },
      { title: '待结金额', dataIndex: 'outstandingAmount', unit: '元' },
      { title: '生成节点', dataIndex: 'createNodeName' },
      { title: '生成时间', dataIndex: 'createTime', width: 180 },
      { title: '收支方式', dataIndex: 'payTypeName' },
      { title: '费用状态', dataIndex: 'feeStatusName' },
      { title: '收付款时间', dataIndex: 'payTime', width: 180 },
      { title: '确认时间', dataIndex: 'confirmTime', width: 180 },
      { title: '确认人', dataIndex: 'confirmUserName' },
      { title: '备注', dataIndex: 'remark' },
      { title: '费用确认信息', dataIndex: 'field_61', slotName: 'billmsg', width: 230 },
      { title: '流水号', dataIndex: 'recordCode', width: 200 },
      { title: '流水状态', dataIndex: 'recordStatusName' },
      { title: '流水确认信息', dataIndex: 'operateUserName', slotName: 'okmsg', width: 230 },
    ],
    buttons: [],
    expandable: {},
  })

  const tabletolist = (list: any) => {
    list.forEach((el: any) => {
      el.mtype = 'MENU'
      el.level = 1
      if (el.feeDetailList && el.feeDetailList.length) {
        el.children = el.feeDetailList
        el.children.forEach((pl: any) => {
          pl.id = pl.id + 10000 //因折叠根据id问题(父子级id相同)，数据只做展示，故自定义
          pl.mtype = 'TERM'
          pl.expand = null
          pl.feeName = pl.itemName
          pl.totalAmount = pl.amount
        })
      } else {
        return false
      }
    })
    return list
  }

  // 获取订单详情
  const violation = ref() //违章信息
  const getOrderDetails = async (id: any) => {
    tableCompulsory.tableLoading = true
    const { result } = await getViolationBillInfo({ id: Number(id) })
    const data = tabletolist(result.carAssetFeeList)
    orderDetails.value = result
    violation.value = result.violation
    tableCompulsory.dataList = data
    tableCompulsory.tableLoading = false
  }
  onMounted(() => {
    if (Number(route.params.id)) {
      getOrderDetails(Number(route.params.id))
    }
  })
</script>

<style lang="less" scoped>
  .quick-search-item-value-checked {
    color: #1890ff;
  }
  :deep(.arco-table-expand-btn) {
    width: 20px;
    height: 20px;
    background-color: inherit;
  }
  :deep(.arco-table-expand-btn:hover) {
    width: 20px;
    height: 20px;
    background-color: inherit;
  }
  .table-info-item-right {
    margin-left: 20px;
  }
</style>
